<template>
    <view class="bottom-bar cart-bottom-bar">
        <checkbox-group @change="checkboxChange" v-if="isShowSelect && productInfo.length > 0">
            <label class="item-radio custom-checkbox-box">
                <checkbox class="checkbox-mark" value="all" :checked="isSelectAllFn(selectData)"></checkbox>
                <custom-checkbox :isSelect="isSelectAllFn(selectData)"></custom-checkbox>
                <text class="text">全选</text>
            </label>
        </checkbox-group>

        <view class="item-mian" v-if="isEdit">
            <view class="price">
                <text @click="clearAll">清空购物车</text>
            </view>
            <text class="btn btn-success-hollow" @click="del">删除</text>
        </view>
        <view class="item-mian" v-else>
            <view class="price">
                <view class="price-box">
                    <text class="price-text">{{ totalPrice }}</text
                    ><text class="price-text small">元</text>
                </view>
                <view class="num"
                    ><text>种类:{{ totalSpace }}</text
                    ><text>数量:{{ totalNum }}</text></view
                >
            </view>
            <button
                class="btn btn-success"
                @click="goSubmitOrder"
                :disabled="productInfo.length < 1 || selectData.ids.length < 1"
                :class="{ disable: productInfo.length < 1 || selectData.ids.length < 1 }">
                去结算
            </button>
        </view>
        <uni-popup ref="tip" type="dialog">
            <uni-popup-dialog
                type="text"
                title="温馨提示"
                content="确定清空购物车？"
                :before-close="true"
                @close="close"
                @confirm="confirm"></uni-popup-dialog>
        </uni-popup>
    </view>
</template>

<script>
import customCheckbox from "@/components/common/custom-checkbox.vue"
import { getCartTotalForSelect } from "@/utils/cartUtil.js"
export default {
    components: {
        customCheckbox,
    },
    props: {
        selectData: {
            type: Object,
            default: {},
        },
        productInfo: {
            type: Array,
            default: [],
        },
        isShowSelect: {
            type: Boolean,
            default: true,
        },
        isEdit: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            totalPrice: 0,
            totalNum: 0,
            totalSpace: 0,
        }
    },
    watch: {
        selectData() {
            this.getTotal(this.productInfo)
        },
    },
    mounted() {
        this.getTotal(this.productInfo)
    },
    methods: {
        //获取总数
        getTotal(data) {
            getCartTotalForSelect(data, this.selectData.ids, (res) => {
                this.totalPrice = res.totalPrice
                this.totalNum = res.totalNum
                this.totalSpace = res.totalSpace
            })
        },
        //确认清空购物车
        confirm() {
            this.close()
            this.$emit("delCart", true)
        },
        //关闭提示
        close() {
            this.$refs.tip.close()
        },
        //清空购物车
        clearAll() {
            if (this.productInfo.length > 0) {
                this.$refs.tip.open()
            }
        },
        //删除物品
        del() {
            this.$emit("delCart", false)
        },
        //去结算
        goSubmitOrder() {
            let ids = this.selectData.ids
            if (ids.length > 0) {
                this.easyGoTo("/pages/order/add-order?ids=" + ids.join(","))
            }
        },
        //全选操作
        checkboxChange(e) {
            let values = e.detail.value
            let isAll = values.length > 0 && values[0] == "all"
            this.$emit("selectAll", isAll)
        },
        //全选是否选中
        isSelectAllFn(data) {
            let ids = data.ids
            let allPro = 0
            this.productInfo.forEach((pro) => {
                pro.SubItems.forEach((sub) => {
                    allPro += 1
                })
            })
            let isSelectAll = ids.length > 0 && ids.length == allPro
            this.$emit("isSelectAllBack", isSelectAll)
            return isSelectAll
        },
    },
}
</script>

<style lang="scss">
.cart-bottom-bar {
    flex-direction: row;
    z-index: 9;

    .item-mian {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex: 1;
    }

    .price {
        display: flex;
        flex: 1;
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;
        margin-right: 20rpx;
        .price-box {
            display: flex;
            flex-direction: row;
            align-items: flex-end;
        }
        .price-text {
            font-size: $font-size-36;
            font-weight: 400;
            color: $color-red;
        }

        .num {
            text {
                margin-left: 10rpx;
            }
        }
        .small {
            font-size: $font-size-26;
            margin-left: 6rpx;
            margin-bottom: 6rpx;
        }
    }
    .btn {
        border-radius: 100rpx;
    }
}

.item-radio {
    display: flex;
    flex-direction: row;
    align-items: center;

    .text {
        margin-left: 10rpx;
    }
}
</style>
